import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import { MqttTable, KafkaTable, JpushTable, SmsTable, EmailTable, ThirdTable } from './components';
import styles from '../../../components/common/PateoTable/TableList.less';
import { routerRedux } from 'dva/router';

@connect()
export default class MessageChannelConfig extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      channelKey: undefined,
    };
  }

  componentDidMount() {
    const channelKey = sessionStorage.getItem('channelKey');
    this.setState({ channelKey });
  }

  componentWillUnmount() {
    sessionStorage.removeItem('channelKey');
  }

  handleGoBack = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ pathname: '/messageCenter/messageChannelManagement' }));
  };

  render() {
    const {
      location: { pathname = '/' },
    } = this.props;
    const { channelKey } = this.state;
    const mapTable = new Map([
      ['1', <EmailTable pathname={pathname} handleGoBack={this.handleGoBack} />],
      ['4', <MqttTable pathname={pathname} handleGoBack={this.handleGoBack} />],
      ['3', <KafkaTable pathname={pathname} handleGoBack={this.handleGoBack} />],
      ['2', <JpushTable pathname={pathname} handleGoBack={this.handleGoBack} />],
      ['5', <SmsTable pathname={pathname} handleGoBack={this.handleGoBack} />],
      ['9', <ThirdTable pathname={pathname} handleGoBack={this.handleGoBack} />],
    ]);
    const mapName = new Map([
      ['1', '邮件配置'],
      ['4', 'MQTT配置'],
      ['3', 'Kafka配置'],
      ['2', '极光推送配置'],
      ['5', '短信配置'],
      ['9', '第三方配置'],
    ]);
    return (
      <div>
        <Card bordered={false} className={styles.card} title={mapName.get(channelKey)}>
          {mapTable.get(channelKey)}
        </Card>
      </div>
    );
  }
}
